

<template>
<div>
  <el-table
      :data="fileDatas.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        label="文件名称"
        prop="fileName"
        width="550" >
      <template #default="scope">
        <span :class="'iconfont '+fileTypeIcons[scope.row.fileType ] "  :style="{
          'cursor': scope.row.fileType === 0? 'pointer':''
        }" @click="enterNextFolder(scope.row.filePath,scope.row.fileType)" ></span>
        <span> {{scope.row.fileName}} </span>
        <div style="float: right;width:200px;height: 20px;" >
        <el-button class="iconfont icon-icon-" size="mini" style="font-size: 10px;" v-if="!recycleFlag"  @click="handleFileOpera(1,scope.row)"  >

        </el-button>
        <el-button class="iconfont icon-fanhui" size="mini" style="font-size: 10px;" v-if="recycleFlag"  @click="handleFileOpera(4,scope.row)"  ></el-button>
        <el-button class="iconfont icon-zhongmingming" size="mini" style="font-size: 10px;" @click="handleFileOpera(2,scope.row)" ></el-button>
          <el-button class="iconfont icon-RectangleCopy" size="mini" style="font-size: 10px;"  @click="handleFileOpera(3,scope.row)" ></el-button>
        </div>
      </template>
    </el-table-column>

    <el-table-column
        label="文件路径"
        prop="filePath">

    </el-table-column>
    <el-table-column
        label="类型"
        prop="fileType">
      <template #default="scope">
        <span    :style="{
          'cursor': scope.row.fileType === 0? 'pointer':''
        }" @click="enterNextFolder(scope.row.filePath,scope.row.fileType)" >{{fileTypeNames[scope.row.fileType ]}}</span>
      </template>

    </el-table-column>
    <el-table-column
        label="大小"
        prop="fileSize">

    </el-table-column>

    <el-table-column
        label="日期"
        prop="accessTime"
        width="150" >
    </el-table-column>



  </el-table>

  <el-dialog
      :title= "this.operaTypeList[this.operaType-1]"
      :visible.sync="threeVisibleOpera"
      width="30%"
  >

    <div v-if="operaType==1" >
      <a :href=" baseUrl()+downLoadFileUrl()+'?fileId='+currentFileId" :download="fileObjDetail['fileName']">点击下载</a>
    </div>

    <div v-if="operaType==2" >
     <el-input placeholder="请输入重命名的名称" v-model="reFileName" type="primary" style="width: 300px;" ></el-input>
      <el-button style="margin-left: 5px;" @click="operaRename" type="primary" > 确认 </el-button>
    </div>
    <div v-if="operaType==3" >
      <el-button @click="operaDelete" >确认删除</el-button>
      <el-button @click="this.threeVisibleOpera = false"  type="info"  > 取消 </el-button>
    </div>
    <div v-if="operaType==4" >
      <el-button @click="refreshFile" >确认恢复</el-button>
      <el-button @click="closeRefreshFile"  type="info"  > 取消 </el-button>
    </div>


  </el-dialog>
<div style="position: fixed; bottom: 30px;" >
  <el-pagination
      background
      layout="prev, pager, next"
      :current-page="currentPage"
      :page-size="7"
      @current-change="nextPage"
      :total="totalPageNum">
  </el-pagination>

</div>


</div>

</template>
<script>
import {
  delFileApi,
  fileDeleteApi,
  fileRenameApi,
  getFileApi,
  postFileApi,
  postFileByTypeApi,
  refreshApi
} from "@/request/request";

import {baseUrl,downLoadFileUrl} from '@/constant/ConStant'

export default {
  name: "FileLister",
  data() {
    return {
      // 三种文件操作 dialogVisible
      threeVisibleOpera: false,
      currentFileId:"",
      isDownLoadFolder:false,
      currentType:-1,
      // 重命名的名称
      reFileName:'',
      //  区分获取文件的方法
      typeGetFile:false,
      totalPageNum:100,
      currentPage:1,
      // 操作类型
      operaType: 1, // 1是下载  2是文件重命名  3 是文件删除 4.文件恢复
      operaTypeList:['下载','重命名','删除操作','文件恢复'],
      fileDatas: [{
        accessTime: '2016-05-02',
        fileName: '张小虎',
        fileType:'icon-tupian1',
        fileSize: 122
      }, {
        accessTime: '2016-05-04',
        fileName: '六小虎',
        fileType:'icon-wendang1',
        fileSize: 122
      }, {
        accessTime: '2016-05-01',
        fileName: '王小虎',
        fileType:'icon-weibiaoti-_huabanfuben',
        fileSize: 317
      }, {
        accessTime: '2016-05-03',
        fileName: '王小虎',
        fileType:'icon-yinpin',
        fileSize: 1222
      }],
      search: '',
      fileTypeIcons:['icon-weibiaoti-_huabanfuben','icon-tupian1','icon-wendang1','icon-yinpin'],
      fileTypeNames:['文件夹','图片','文档','音频'],
      currentPath:"",
      currentSelectPathIndex:-1,
      currentTotalPaths:[],
      recycleFlag:false,
      fileObjDetail:{}
    }
  },
  props:{
    // fileList:[
    //     {
    //       fileName:"",
    //       fileType:"",
    //       createTime:"",
    //       isDirectory:0,
    //       fileSize:""
    //     },{},{}
    // ]
  },
  mounted() {
    this.getFileList2()
  },
  methods: {
    downLoadFileUrl() {
      return downLoadFileUrl
    },
    baseUrl() {
      return baseUrl
    },
    /**
     *  1 2 3 分别对应文件的三种不同的操作
     * @param e
     */
    handleFileOpera(e,v){
      this.threeVisibleOpera = true
      console.log( this.isDownLoadFolder)
      if(e ==1){
        if(v['isDirectory']){
           this.isDownLoadFolder= true
          console.log( this.isDownLoadFolder)
        }
      }else{
        this.isDownLoadFolder= false
      }
      this.operaType = e
      this.fileObjDetail = v
      this.currentFileId = v['fileId']
    },

    operaDelete(){

      delFileApi({
        //  判断是物理还是逻辑删除
        type: this.recycleFlag?1: 0,
        fileId: this.currentFileId
      }).then(e=>{
        if(e['data']['code']===200){
          this.threeVisibleOpera = false
          this.$message({
            type:'success',
            message:'删除成功'
          })
        }else{
          this.$message({
            type:'error',
            message:'删除失败'
          })
        }
      })
    },
    /**
     * 文件恢复，
     */
    refreshFile(){
      // 文件实现
      refreshApi({
        fileId:this.currentFileId
      }).then(e=>{
        console.log(e['data'])
        if(e['data']['code'] === 200){
          this.$message({
            type:'success',
            message:'文件已恢复'
          })
          this.threeVisibleOpera = false
        }else {
          this.$message({
            type:'error',
            message:'文件删除失败'
          })
          this.threeVisibleOpera = false
        }
      })

    },

    closeRefreshFile(){
      // 回收文件功能标志
      this.threeVisibleOpera = false

    },

    operaRename(){
      fileRenameApi({
        // 表示逻辑删除
        type: 0,
        path: this.currentPath,
        fileId:this.currentFileId,
        newName: this.reFileName
      }).then(e=>{
        console.log(e)
        this.reFileName = "";
        if(e['data']['code']===200){
          this.threeVisibleOpera = false
          this.$message({
            type:'success',
            message:'重命名成功'
          })
        }else{
          this.$message({
            type:'info',
            message:'重命名失败'
          })
        }
      })
    },

    /**
     * 获取当前的文件夹路径
     * @returns {string}
     */
    getCurrentDir(){
      return this.currentPath
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    /**
     *   进入到root目录后的下一级目录 <--> 首次进入文件夹的操作
     */
    enterFolder(e,type){
      // 判断是不是文件夹
      if(type!==0){
        return
      }
      this.currentSelectPathIndex ++
      this.currentTotalPaths = []
      this.currentTotalPaths.push(e)
    },

    /**
     * 进入到下级目录
     */
    enterNextFolder(e,type){
      this.currentTotalPaths.push(e)
      this.currentPath = e
      this.getFileList2()
    },
    /**
     * 回退到上级目录
     */
     backNextFolder(){
      this.currentPath =this.currentTotalPaths.pop();
      console.log("currentPath: "+this.currentPath)
      this.getFileList2()
    },

    /**
     * 修改当前页
     */
    nextPage(e){
      let type = this.typeGetFile
      this.currentPage = e
      console.log( 'current Page : '+ this.currentPage )
      let data = {
        path: this.currentPath,
        pageSize: 7,
        pageNum: this.currentPage,
      }
      if(type){
        this.getFilesByType(this.currentType)
      }else{
        postFileApi(data).then(e=>{

          if(e['data']['code'] ===200){
            console.log( e['data']['data'])
            this.fileDatas = e['data']['data']['dataList']
            this.totalPageNum = e['data']['data']['total']
          }else{
            this.$message({
              type:'error',
              message:e['msg']
            })
          }


        })
      }
    },

    /**
     * 获取文件列表的操作
     */
    getFileList(e,type){
        this.currentPath = e
        getFileApi( "?path="+e ).then(e=>{
          console.log('== e '+ JSON.stringify(e['data']['data']))
          // this.fileDatas = e['data']['data']
        })
    },
    /**
     * 获取不同类型的文件
     */
    getFilesByType(type){
      // 当这个方法被调用时就可以拿到
      this.typeGetFile= true
      // 判断是否是删除状态
      this.recycleFlag = type === 8;
      this.currentType = type
      console.log('type: '+type)
      postFileByTypeApi({
        type: type,
        pageNum: this.currentPage,
        pageSize: 7
      }).then(e=>{
        this.fileDatas = e['data']['data']['dataList']
        this.totalPageNum = e['data']['data']['total']
      })
    },
    /**
     * 刷新方法 ， 一种简单的实现
     */
    getFileList2(){

      // 是否是回收站
      if(this.recycleFlag ){
        postFileByTypeApi({
          type: this.currentType,
          pageNum: this.currentPage,
          pageSize: 7
        }).then(e=>{
          this.fileDatas = e['data']['data']['dataList']
          this.totalPageNum = e['data']['data']['total']
        })
        return
      }
      // 是否要判断
      if(this.currentType>0){
        postFileByTypeApi({
          type: this.currentType,
          pageNum: this.currentPage,
          pageSize: 7
        }).then(e=>{
          this.fileDatas = e['data']['data']['dataList']
          this.totalPageNum = e['data']['data']['total']
        })
        return
      }

      this.typeGetFile = false
     if(this.currentPath===undefined){
       this.currentPath = ''
     }
      console.log("=====》"+ this.currentPath)
      // 分页查询
      let data = {
        path: this.currentPath,
        pageSize: 7,
        pageNum: this.currentPage,
      }
        postFileApi( data).then(e=>{
          console.log("==========》")
          console.log( e['data'])
          console.log("==========》")

          if(e['data']['code'] ===200){
            console.log( e['data']['data'])
            this.fileDatas = e['data']['data']['dataList']
            this.totalPageNum = e['data']['data']['total']
          }else{
            this.$message({
              type:'info',
              message:e['data']['msg']
            })
          }


        })
    },



  }

}
</script>
<style >
.el-table .warning-row {

  background: oldlace;
}

.font-set{
  font-family: Avenir, Helvetica, Arial, sans-serif ;font-size: 14px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #ffffff;

}
.bg-purple {
  background: #ffffff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  margin: 2px;
  min-height: 30px;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>